<template>
  <div class="news">
    <div class="relation-img">
      <img src="../../assets/index/组 5.png" alt />
    </div>
    <div class="headline">
      <p class="title">头条新闻</p>
      <el-carousel arrow="never" indicator-position="outside">
        <el-carousel-item v-for="item in 4" :key="item">
          <div class="advertising">
            <img src="../../assets/news/蒙版组 6.png" alt />
            <div class="right">
              <div>聚选科技实现启动第一目标</div>
              <div>2022.10.01</div>
              <div>平台计划未来在全国500个城市里，开发近 20000家社区便民服务中心，建立近万人的专业团队，以软件产品为核心，实现一体数智化运营服务，开发跨境供应链系统，会员管理系统，店面营销系统，店面管理系统等专业零售店铺管理工具，通过打磨沉淀，逐步形成一个全新的、高效的跨境电商运营体系和组织生态，引领行业新风向，重塑行业新格局！</div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 日常新闻 -->
    <div class="daily">
      <p class="title">日常新闻</p>
      <div class="dailyBox">
          <div class="dailyLeft">
            <p>11</p>
            <p>2022.10</p>
          </div>
          <div class="dailyRight">
              <div><span></span><span>WHY US</span></div>
              <div>源聚变商城是四川省、市政府支持的首家元宇宙创新跨境电商模式，也是省市级重点引进的外资企业，并且政府特给与一定面积的办公场地使用支持。</div>
          </div>
      </div>
      <div class="dailyBox">
          <div class="dailyLeft">
            <p>11</p>
            <p>2022.10</p>
          </div>
          <div class="dailyRight">
              <div><span></span><span>WHY US</span></div>
              <div>源聚变商城是四川省、市政府支持的首家元宇宙创新跨境电商模式，也是省市级重点引进的外资企业，并且政府特给与一定面积的办公场地使用支持。</div>
          </div>
      </div>
      <div class="dailyBox">
          <div class="dailyLeft">
            <p>11</p>
            <p>2022.10</p>
          </div>
          <div class="dailyRight">
              <div><span></span><span>WHY US</span></div>
              <div>未来目标是发展壮大至东南亚地区，成为东南亚地区流行爆款的好物实用APP，并且最终会落地元宇宙世界，实现虚实二界的流动交换。</div>
          </div>
      </div>
    </div>
    <div class="block">
  <div class="beian">Copyright  2012-2022 江西聚变科技有限责任公司 备案号：<a href="http://beian.miit.gov.cn/">赣ICP备2021006566号</a></div>
    
  </div>
  </div>
</template>
<script>

  export default {
    components:{
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        currentPage3: 5,
      };
    }
  }
</script>


<style lang="less" scoped>
.beian{
  font-size:0.22rem;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#000000;
}
.block{
  padding: 0.52rem 2.6rem 0px;
  margin-top: 0.52rem;
  text-align: right;
  margin-bottom: 0.5rem;
}
.daily{
  display: flex;
  flex-direction: column;
  padding: 0.52rem 2.6rem 0px;
  .dailyBox{
    margin-top: 0.39rem;
    display: flex;
    .dailyLeft{
      width: 1rem;
      height: 1rem;
      background-color: #F2F2F2;
      line-height: 0.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      p:first-child{
        color: #B5B2B2;
        font-size: 0.5rem;
      }
      p:last-child{
        color: #B5B2B2;
        font-size: 0.2rem;
        
      }
    }
    .dailyRight{
      width: 9.35rem;
      margin-left: 0.33rem;
      line-height: 0.28rem;
      div:first-child{
        display: flex;
        align-items: center;
        margin-bottom: 0.09rem;
        span:first-child{
          width: 0.1rem;
          height: 0.1rem;
          background: #000000;
          border-radius: 50%;
          display: inline-block;
        }
        span:last-child{
          font-size: 0.28rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          margin-left: 0.14rem;
        }
      }
      div:last-child{
        color: #666666;
        font-size: 0.24rem;
      }
    }
  }
}
/deep/.el-carousel__container {
  height: 4.4rem;
}
.advertising{
  display: flex;
  img{
    width:5.03rem ;
    height: 4.4rem;
  }
  .right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 0.36rem;
    margin-left: 0.6rem;
    div:first-child{
      font-size: 0.26rem;
      color: #000000;
      font-weight: bold;
    }
    div:nth-child(2){
      margin: 0.07rem 0;
      font-size: 0.20rem;
    }
    div{
      font-size: 0.22rem;
      color: #999999;
    }
  }
}
/deep/.el-carousel__button {
  width: 0.24rem;
  height: 0.24rem;
  background-color: #666666;
  border-radius: 50%;
}
/deep/.el-carousel__indicator.is-active button {
  background-color: #ff7200;
}
.el-carousel__item {
  background-color: #cccccc;
}

.headline {
  margin-top: 0.66rem;
  padding: 0.52rem 2.6rem 0px;
}

.title {
  font-size: 0.3rem;
  color: #333333;
  margin-bottom: 0.32rem;
  font-weight: bold;
}
.news {
  // padding: 52px 260px 0px;
  line-height: 0;
}
.relation-img {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 0.72rem;
  img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/deep/.el-pager li {
    font-size: 0.18rem;
    min-width: 0.45rem;
    height: 0.44rem;
    line-height: 0.44rem;
}
/deep/.el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
    line-height: 0.44rem;
}
/deep/.el-pagination button, .el-pagination span{
    font-size: 0.16rem;
    min-width: 0.35rem;
    height: 0.44rem;
    line-height: 0.44rem;
}
/deep/.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon {
    font-size: 0.16rem;
}
/deep/.el-pager .more::before {
    line-height: 0.44rem;
}
/deep/.el-pagination__jump {
    font-size: 0.16rem!important;
    height: 0.44rem!important;
    line-height: 0.44rem!important;
}
</style>
